<template>
  <view class="cohabitation-add">
    <view class="return-box" @click="goBack">
      <up-icon name="arrow-left"></up-icon>
    </view>
    <view class="return-title" >
      {{type == "新增"?"同住人新增" : "同住人修改"}}
    </view>
    <view class="information-box">
      <h4 class="title">信息详情</h4>
      <up-cell-group :border="false">
        <up-cell title="姓名">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入姓名"
              border="none"
              v-model="name"
            ></up-input>
          </template>
        </up-cell>
        <up-cell
          @click="sexClick"
          title="性别"
          :value="sex ? sex : '请选择性别'"
          isLink
        >
        </up-cell>
        <up-cell title="电话" :value="phone">
          <template #value>
            <up-input
              inputAlign="right"
              placeholderStyle="color: #606266;"
              placeholder="请输入电话"
              border="none"
              v-model="phone"
            ></up-input>
          </template>
        </up-cell>
        <up-cell
          title="户号"
          @click="householdShow = true"
          :value="household ? household : '请选择户号'"
          isLink
        >
        </up-cell>
        <up-cell title="证件">
          <template #value>
            <text @click="certificatesShow = true">
              {{ certificates ? certificates : "请选择证件类型" }}
            </text>
            <up-icon name="arrow-right" color="#909399" size="16"></up-icon>
          </template>
          <template #label>
            <up-input
              placeholder="请输入证件号码"
              border="none"
              placeholderStyle="color: #606266;"
              v-model="certificatesText"
              :customStyle="{ marginTop: '40rpx' }"
            ></up-input>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <up-picker
      :show="show"
      ref="uPickerRef"
      :closeOnClickOverlay="true"
      :columns="columns"
      @close="show = false"
      @confirm="handlerConfirm"
      @cancel="show = false"
    ></up-picker>
    <up-picker
      :show="householdShow"
      :closeOnClickOverlay="true"
      :columns="householdColumns"
      @close="householdShow = false"
      @confirm="handlerHouseholdShowConfirm"
      @cancel="householdShow = false"
    ></up-picker>
    <up-picker
      :show="certificatesShow"
      :closeOnClickOverlay="true"
      :columns="certificatesColumns"
      @close="certificatesShow = false"
      @confirm="handlerCertificatesConfirm"
      @cancel="certificatesShow = false"
    ></up-picker>
    <view class="room-btn">
      <button class="btn" @click="submitClick" form-type="submit">
        {{ btnText }}
      </button>
    </view>
    <up-modal
      :show="modalShow"
      title="操作确认"
      content="是否修改该同住人信息？"
      :showCancelButton="true"
      @confirm="saveOrUpdateInmate"
      @cancel="modalShow= false"
    ></up-modal>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import {
  saveOrUpdateInmateApi,
} from "@/package_kuafu_apartment/pages/api/cohabitation";
import {
  getDictConfigListByType,
} from "@/package_kuafu_apartment/pages/api/home";
import { getRoomInfoApi } from "@/package_kuafu_apartment/pages/api/house";
import { reactive, ref } from "vue";
const show = ref(false);
const modalShow = ref(false);
const householdShow = ref(false);
const certificatesShow = ref(false);
const personnel = ref("");
const name = ref("");
const sex = ref("");
const phone = ref("");
const household = ref("");
const certificates = ref("");
const certificatesText = ref("");
const columns = reactive([["男", "女"]]);
const householdColumns = ref([]);
const certificatesColumns = ref([]);
const type = ref("");
const btnText = ref("");

function handlerConfirm(data) {
  sex.value = data.value[0];
  show.value = false;
}
function handlerHouseholdShowConfirm(data) {
  console.log(1, data);
  household.value = data.value[0];
  householdShow.value = false;
}
function handlerCertificatesConfirm(data) {
  console.log(2, data);
  certificates.value = data.value[0];
  certificatesShow.value = false;
}
function sexClick() {
  show.value = true;
}
async function getDictConfigListByTypeData() {
  const res = await getDictConfigListByType("4");
  console.log(res);
  certificatesColumns.value = [
    res.data[0].children.map((o) => {
      return o.filedName;
    }),
  ];
}
async function saveOrUpdateInmate() {
  let submit = {};
  if (type.value == "新增") {
    submit = {
      accountNumber: household.value,
      inmateCertificateNumber: certificatesText.value,
      inmateCertificateType: certificates.value,
      inmateName: name.value,
      inmatePhone: phone.value,
      inmateSex: sex.value,
    };
  } else {
    submit = {
      id: personnel.value,
      accountNumber: household.value,
      inmateCertificateNumber: certificatesText.value,
      inmateCertificateType: certificates.value,
      inmateName: name.value,
      inmatePhone: phone.value,
      inmateSex: sex.value,
    };
  }

  const res = await saveOrUpdateInmateApi(submit);
  console.log(res);
  if (res.code == 200) {
    uni.navigateBack({
      delta: 1,
    });
  } else {
    uni.showToast({
      icon: "none",
      title: res.msg,
      duration: 2000,
    });
  }
}
function submitClick() {
  if (name.value == "") {
    uni.showToast({
      icon: "none",
      title: "请输入姓名",
      duration: 2000,
    });
  } else if (sex.value == "") {
    uni.showToast({
      icon: "none",
      title: "请选择性别",
      duration: 2000,
    });
  } else if (phone.value == "") {
    uni.showToast({
      icon: "none",
      title: "请输入电话",
      duration: 2000,
    });
  } else if (household.value == "") {
    uni.showToast({
      icon: "none",
      title: "请选择户号",
      duration: 2000,
    });
  } else if (certificates.value == "") {
    uni.showToast({
      icon: "none",
      title: "请选择证件类型",
      duration: 2000,
    });
  } else if (certificatesText.value == "") {
    uni.showToast({
      icon: "none",
      title: "请输入证件号码",
      duration: 2000,
    });
  } else {
    if (type.value == "新增") {
      saveOrUpdateInmate();
    } else {
      modalShow.value = true;
    }
  }
}
// 房号选项
async function getRoomInfo() {
  const res = await getRoomInfoApi({
    page: 1,
    size: 9999,
  });
  console.log("getRoomInfo", res);
  householdColumns.value = [
    res.data.records.map((o) => {
      return o.accountNumber;
    }),
  ];
  console.log(certificatesColumns.value);
}
function goBack() {
  uni.navigateBack({
    delta: 1, // 默认值是1，表示返回的页面层数
  });
}
onLoad((option) => {
  getDictConfigListByTypeData();
  getRoomInfo();
  console.log(option);
  type.value = option.type;
  if (type.value == "新增") {
    btnText.value = "确认";
  } else {
    btnText.value = "修改";
    let item = JSON.parse(option.item);
    name.value = item.inmateName;
    sex.value = item.inmateSex;
    phone.value = item.inmatePhone;
    household.value = item.accountNumber;
    certificates.value = item.inmateCertificateType;
    certificatesText.value = item.inmateCertificateNumber;
    personnel.value = item.id;
  }
});
</script>

<style lang="less" scoped>
@import url(./style/cohabitation-add.less);
</style>